<template>
  <div ref="chart" class="box"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ChartType1",
  props: {
    optionx: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chartBox: null,
      echartOption: {
        series: [
          {
            name: "电压",
            type: "gauge",
            color: "#fff",
            startAngle: 180,
            endAngle: 0,
            radius: "100%",
            center: ["50%", "65%"], // 默认情况下，仪表盘位于容器的中心
            axisLine: {
              // 仪表盘的刻度线
              lineStyle: {
                width: 1,
              },
            },
            axisTick: {
              // 刻度标记
              distance: -8, // 将刻度标记放置在分割线上方
              length: 8,
              lineStyle: {
                color: "#e8e8e8",
                width: 2,
              },
            },
            splitLine: {
              // 分割线
              distance: 1, // 分割线距离中心更近
              length: 8,
              lineStyle: {
                color: "#e8e8e8",
                width: 4,
              },
            },
            axisLabel: {
              // 隐藏刻度文字
              show: false,
            },
            pointer: {
              // 指针
              width: 5,
              color: "auto",
            },
            title: {
              // 仪表盘标题
              offsetCenter: [0, "20px"],
              textStyle: {
                color: "#e8e8e8",
                fontSize: 14,
              },
            },
            detail: {
              // 显示数值
              formatter: "{value}",
              offsetCenter: [0, "-50%"],
              textStyle: {
                color: "#76F266",
                fontSize: 18,
              },
            },
            data: [
              {
                value: 50,
                name: "电压",
                unit: "V",
              },
            ],
          },
        ],

        graphic: {
          elements: [
            {
              type: "text",
              left: 10,
              top: 10,
              style: {
                text: "V",
                fontSize: 16,
                fill: "#e8e8e8", // 文字颜色
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.onWindowResize);
  },
  beforeDestroy() {
    if (this.chartBox) {
      this.chartBox.dispose();
    }
    window.removeEventListener("resize", this.onWindowResize);
  },
  methods: {
    initChart() {
      this.chartBox = echarts.init(this.$refs.chart);
      setTimeout(() => {
        this.chartBox.setOption(this.echartOption);
      }, 1000);
    },
    setEchartOption() {
      if (this.chartBox) {
        setTimeout(() => {
          this.chartBox.setOption(this.echartOption);
        }, 1000);
      }
    },
    onWindowResize() {
      if (this.chartBox) {
        this.chartBox.resize();
      }
    },
  },
  watch: {
    optionx: {
      handler(newVal, oldVal) {
        console.log(1, newVal);
        if (newVal) {
          console.log("optionx", newVal);
          this.echartOption = newVal;
        }
      },
    },
    echartOption: {
      handler(newVal, oldVal) {
        if (newVal) {
          console.log("echartOption", newVal);
          this.setEchartOption();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 202px;
  height: 128px;
}
</style>
